<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:http="http://www.w3.org/1999/xhtml"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">

<head th:replace="common/headcss :: headcss">
</head>
<head>
    <link rel="stylesheet" type="text/css" href="/static/assets/jquery.datetimepicker.css">
</head>

<body>

<div th:replace="common/nav :: nav"></div>
<section class="page-section clearfix" style="background-color: white;margin: 0px;">
    <div style="height: 100px;">

    </div>
    <div class="container">
        <div style="margin-bottom: 30px;"
             th:each="stuDailyClockMessage,stuDailyClockMessageStat : ${stuDailyClockMessageList}">
            <b>这是<span th:text="${stuDailyClockMessage.stuName}"></span>同学的第<span th:text="${ ' '+ (stuDailyClockMessageStat.index+1)+ ' '}"></span>段预约打卡安排。</b>
            <h4 th:text="${#dates.format(stuDailyClockMessage.startTime,'yyyy-MM-dd')} + '~' + ${#dates.format(stuDailyClockMessage.endTime,'yyyy-MM-dd')}"></h4>
            <h4 th:text="'是否在校：' + ${stuDailyClockMessage.atSchoolOrNot == 1 ? '是' : '否'}"></h4>

            <div th:if=" ${stuDailyClockMessage.notAtSchoolType} != null">
                <h4 th:text="'不在校原因类型：' + ${stuDailyClockMessage.notAtSchoolType}"></h4>
            </div>

            <div th:if=" ${stuDailyClockMessage.notAtSchoolOtherTypeDescription} != null">
                <h4 th:text="'其它类型的不在校原因描述：' + ${stuDailyClockMessage.notAtSchoolOtherTypeDescription}"></h4>
            </div>
            <h4 th:text="'打卡位置：' + ${stuDailyClockMessage.location}"></h4>

            <div th:if=" ${stuDailyClockMessage.locatChangeType} != null">
                <h4 th:text="'位置变动原因类型：' + ${stuDailyClockMessage.locatChangeType}"></h4>
            </div>

            <div th:if=" ${stuDailyClockMessage.locatChangeOtherTypeDescription} != null">
                <h4 th:text="'其它类型的位置变动原因描述：' + ${stuDailyClockMessage.locatChangeOtherTypeDescription}"></h4>
            </div>
            <div style="margin-top: 20px;">
                <a class="btn btn-group-sm btn-danger"  th:href="'/preset/delete/'+${stuDailyClockMessage.autoId}">删除这段时间的预约</a>
            </div>
        </div>
    </div>
    <div class="container">
        <div style="margin-bottom: 30px;">
            <h2 style="color: orangered;" th:text="${ deleteMsg }"></h2>
        </div>
        <div style="margin-bottom: 30px;">
            <h2>预约一段新的打卡安排</h2>
        </div>
        <div style="margin-bottom: 30px;">
            <h2 style="color: orangered;" th:text="${ stuDailyClockMSG }"></h2>
        </div>

        <form method="post" action="/preset">

            <div class="form-group">
                <label class="col-form-label col-sm-3">请选择时间</label>
                <div class="col-sm-4 form-check form-check-inline">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="startTime">开始日期</span>
                    </div>
                    <input type="text" name="startTime" class="form-control" aria-describedby="startTime"
                           id="datetimepickerstart" autocomplete="off" required>
                </div>
                <div class="col-sm-4 form-check form-check-inline">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="endTime">结束日期</span>
                    </div>
                    <input type="text" name="endTime" class="form-control" aria-describedby="endTime"
                           id="datetimepickerend" autocomplete="off" required>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3">今日是否在校住宿?</label>
                <div class="col-sm-6 form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="atSchoolOrNot" id="atSchoolOrNot1"
                           value="1" checked onclick="todayAtSchool(10001)">
                    <label class="form-check-label" for="atSchoolOrNot1">在校</label>
                </div>
                <div class="col-sm-2 form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="atSchoolOrNot" id="atSchoolOrNot2"
                           value="0" onclick="todayAtSchool(10002)">
                    <label class="form-check-label" for="atSchoolOrNot2">不在校</label>
                </div>

            </div>

            <div class="form-group" id="notAtSchoolTypeDiv" style="display: none;">
                <label class="control-label col-sm-3" for="notAtSchoolOtherType">不在校原因</label>
                <div class="col-sm-8 form-check form-check-inline">
                    <select class="form-control" onclick="todayNotAtSchoolType()" name="notAtSchoolType"
                            id="notAtSchoolOtherType">
                        <option value="1">临时出校</option>
                        <option value="2">寒假返乡</option>
                        <option value="3">在境外科研学习</option>
                        <option value="4">在境内校外出差、实习</option>
                        <option value="5">病假、事假或休学中</option>
                        <option value="6">其它</option>
                    </select>
                </div>
            </div>

            <div class="form-group" id="notAtSchoolOtherTypeDescriptionDiv" style="display: none;">
                <label for="notAtSchoolOtherTypeDescription" class="col-form-label col-sm-3">其它类型的不在校原因具体填写</label>
                <div class="col-sm-8 form-check form-check-inline">
                <textarea class="form-control" name="notAtSchoolOtherTypeDescription"
                          id="notAtSchoolOtherTypeDescription" required>因为...</textarea>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3">今日本人情况是否正常?</label>
                <div class="col-sm-6 form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="yourself" id="normal" value="normal"
                           disabled checked>
                    <label class="form-check-label" for="normal">正常</label>
                </div>
                <div class="col-sm-2 form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="yourself" id="abnormal" value="abnormal"
                           disabled>
                    <label class="form-check-label" for="abnormal">不正常</label>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3">14日内接触的环境和人员一切正常?</label>
                <div class="col-sm-6 form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="allright" id="yes" value="yes" disabled checked>
                    <label class="form-check-label" for="yes">是（未接触风险地区和人员，无入境共居人员，社区无确诊）</label>
                </div>
                <div class="col-sm-2 form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="allright" id="no" value="no" disabled>
                    <label class="form-check-label" for="no">否</label>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3">所在地点</label>
                <div class="col-sm-6 form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="homeoraboard" id="home" value="home" disabled
                           checked>
                    <label class="form-check-label" for="home">国内</label>
                </div>
                <div class="col-sm-2 form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="homeoraboard" id="aboard" value="aboard"
                           disabled>
                    <label class="form-check-label" for="aboard">港澳台或国外</label>
                </div>
            </div>

            <div class="form-group">
                <label class="col-form-label col-sm-3">请输入预期打卡地点的经纬度</label>
                <div class="col-sm-4 form-check form-check-inline">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="longPrepend">经度</span>
                    </div>
                    <input type="text" class="form-control" aria-describedby="longPrepend" id="long" value="116.35109"
                           name="dailyClockLongitude" required>
                </div>
                <div class="col-sm-4 form-check form-check-inline">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="latPrepend">纬度</span>
                    </div>
                    <input type="text" class="form-control" aria-describedby="latPrepend" id="lat" value="39.98102"
                           name="dailyClockLatitude" required>
                </div>
            </div>


            <div class="form-group">
                <label for="loc" class="col-form-label col-sm-3">该经纬度对应的位置信息</label>
                <div class="col-sm-6 form-check form-check-inline">
                    <input type="text" class="form-control" id="loc" value="务必点击获取位置信息按钮生成位置信息！！"
                           name="location" required readonly>
                    <input type="hidden" class="form-control" id="locSimple" value="xx" name="locationSimple">
                </div>
                <div class="col-sm-2 form-check form-check-inline">
                    <a class="btn btn-primary" onclick="getLoc()">获取位置信息</a>
                </div>
            </div>


            <div class="form-group">
                <label class="control-label col-sm-3" for="notAtSchoolType">位置变动原因</label>
                <div class="col-sm-8 form-check form-check-inline">
                    <select class="form-control" id="notAtSchoolType" onclick="locationType()" name="locatChangeType">
                        <option value="0">这段时间和上一段时间之间不存在位置变动</option>
                        <option value="1">外出探亲</option>
                        <option value="2">旅游</option>
                        <option value="3">回家</option>
                        <option value="4">其他</option>
                    </select>
                </div>
            </div>

            <div class="form-group" id="notAtSchoolOtherTypeReasonDiv" style="display: none;">
                <label for="notAtSchoolOtherTypeDescription" class="col-form-label col-sm-3">其它类型的不在校原因具体填写</label>
                <div class="col-sm-8 form-check form-check-inline">
                <textarea class="form-control" name="locatChangeOtherTypeDescription"
                          id="locatChangeOtherTypeDescription">因为...</textarea>
                </div>
            </div>

            <div class="form-group">
                <button type="submit" id="mysubmit" class="btn btn-primary form-control" disabled="true">提交</button>
            </div>
        </form>

        <div style="height: 100px;">

        </div>
    </div>
</section>

<div th:replace="common/footer :: footer"></div>
<div th:replace="common/footerscript :: footerscript"></div>
<script src="/static/assets/jquery.datetimepicker.full.js"></script>
<script>
    $('#datetimepickerstart').datetimepicker({
        timepicker: false,
        format: 'Y-m-d'
    });
    $('#datetimepickerend').datetimepicker({
        timepicker: false,
        format: 'Y-m-d'
    });
    $.datetimepicker.setLocale('zh');
</script>
<script>
    function todayAtSchool(code) {
        //10001是在校，10002是不在校
        if (code == 10001) {
            //在校则应当隐藏“不在校类型”和“其它不在校类型的原因填写”
            document.getElementById("notAtSchoolTypeDiv").style.display = "none";
            document.getElementById("notAtSchoolOtherTypeDescriptionDiv").style.display = "none";
        } else if (code == 10002) {
            //不在校，应当显示“不在校类型”
            document.getElementById("notAtSchoolTypeDiv").style.display = "inline";
        }
    }

    function todayNotAtSchoolType() {
        var notAtSchoolOtherTypeObj = document.getElementById("notAtSchoolOtherType");
        var type = notAtSchoolOtherTypeObj.options[notAtSchoolOtherTypeObj.selectedIndex].value;
        if (type == 6) {
            //"其它"类型的不在校，应当显示“其它不在校类型的原因填写”
            document.getElementById("notAtSchoolOtherTypeDescriptionDiv").style.display = "inline";
        } else {
            //非"其它"类型的不在校，应当隐藏“其它不在校类型的原因填写”
            document.getElementById("notAtSchoolOtherTypeDescriptionDiv").style.display = "none";
        }
    }

    function locationType() {
        var notAtSchoolTypeObj = document.getElementById("notAtSchoolType");
        var type = notAtSchoolTypeObj.options[notAtSchoolTypeObj.selectedIndex].value;
        if (type == 4) {
            //"其它"类型的地址变动，应当显示“其它地址变动类型的原因填写”
            document.getElementById("notAtSchoolOtherTypeReasonDiv").style.display = "inline";
        } else {
            //非"其它"类型的地址变动，应当隐藏“其它地址变动类型的原因填写”
            document.getElementById("notAtSchoolOtherTypeReasonDiv").style.display = "none";
        }
    }

    function getLoc() {
        let long = document.getElementById("long").value;
        let lat = document.getElementById("lat").value;
        var longandlat = long + "," + lat;
        /**
         * 下面是获取位置信息的逻辑代码
         */
        $.ajax({
            url: "https://restapi.amap.com/v3/geocode/regeo",
            data: {
                key: '729923f88542d91590470f613adb27b5',
                s: 'rsv3',
                language: 'zh_cn',
                location: longandlat,
                extensions: 'base',
                callback: 'jsonp_819225_',
                platform: 'JS',
                logversion: '2.0',
                appname: 'https://app.buaa.edu.cn/site/buaaStudentNcov/index',
                csid: 'D974690B-66FC-43CF-92E4-777F43B3A45B',
                sdkversion: '1.4.16'
            },
            type: "GET",
            dataType: "text",
            success: function (data) {
                // console.log(data);
                dataObjStr = data.substring(data.indexOf("(") + 1, data.indexOf(")"));
                const dataToObj = JSON.parse(dataObjStr);
                // console.log(dataToObj);
                let locStr = dataToObj.regeocode.formatted_address;
                // console.log(dataToObj.regeocode.formatted_address);
                document.getElementById("loc").value = locStr;
                document.getElementById("locSimple").value = dataObjStr;
                $('#mysubmit').attr("disabled",false);
            },
            error: function (e) {
                console.log(e.status);
                console.log(e.responseText);
            }
        });

    }
</script>

</body>

</html>